<template>
  <div>


    <div class="con">
      <div class="p-show">

        <div v-if="detail.art.img==='无'"></div>
        <div v-else>
          <img :src="detail.art.img" alt="Logo">
        </div>
        <h2>【{{ detail.art.name }}】 </h2>
      </div>
    </div>
    <div class="w1100">
      <div class="container">
        <div class="left">
          <el-descriptions size="large" title="" :column="3"
                           border class="custom-background" label-class-name="custom-font-size label-class-name">
            <el-descriptions-item label="体验店">{{ detail.listStore[0].store }}</el-descriptions-item>
            <el-descriptions-item label="申报省">{{ detail.listStore[0].sheng }}</el-descriptions-item>
            <el-descriptions-item label="申报市">{{ detail.listStore[0].shi }}</el-descriptions-item>
            <el-descriptions-item label="营业时间">
              <el-tag size="large" type="info">{{ detail.listStore[0].businessHours }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              {{ detail.listStore[0].location }}
            </el-descriptions-item>
          </el-descriptions>


        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import {useRoute} from "vue-router";
import {getRegionalCultureApi} from "@/api/district";
import {getArtAPi, getStoreAPi} from "@/api/art";


// 热门体验店数据
const stores = ref([
  {name: '体验店一', link: '#'},
  {name: '体验店二', link: '#'},
  {name: '体验店三', link: '#'}
]);

const currentImageIndex = ref(0);

const showImage = (index: number) => {
  currentImageIndex.value = index;
};

// 获取当前路由
const route = useRoute();

// 获取数据的函数

function getData() {


  getStoreAPi({id: detail.art.id}).then((res) => {
    detail.listStore = res.data
  })
}

const detail = reactive({
  art: {id: '', store: '', name: '', img: '', alt: '', sheng: '', shi: ''},
  listArt: [{introduce: ""}],
  listStore: [{id: '', store: '', name: '', img: '', alt: '', sheng: '', shi: '', businessHours: '', location: ''}]
})
// 切换图片的定时器
onMounted(() => {
  Object.assign(detail.art, route.query);
  getData()
});


</script>

<style scoped>

.custom-background >>> .el-descriptions__body {
  background-color: #fcf5e8;

}

.custom-background >>> .el-descriptions__cell {
  background-color: #fcf5e8;
  font-size: 20px !important;
}


.left {
  width: 100%;
  padding: 50px ;
}

.el-table {
  background-color: #fcf5e8 !important;
  padding: 30px;
}

.else {
  width: 50%;
  border: 2px solid rgba(200, 200, 200, 0.3);
  border-radius: 10px; /* 可以根据需要调整圆角 */
  margin: 20px; /* 可以根据需要调整外边距 */
}

.container1 {
  display: flex;
}

.left-side {
  flex: 1;
}

.right-side {
  flex: 2;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.carousel img {
  width: 100%;
  height: auto;
  position: absolute;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.carousel img.active {
  opacity: 1;
}

.intro {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

.links ul {
  list-style-type: none;
  padding: 0;
}

.links li {
  margin: 10px 0;
}

.links a {
  text-decoration: none;
  color: #007bff;
}
</style>
